<!DOCTYPE html>
<html>
<meta charset="UTF-8" />
<title>React的事件</title>
<script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
</head>
<body>
     <div id = "example"></div>
	   <script type="text/babel">





    /**
	 *  React元素处理事件与处理DOM元素处理不同点
	 *
	 *  1、React事件使用驼峰命名法则
	 *
	 *  2、JSX事件传递的是函数
	 *    <button onClick={activateLasers}>
                  Activate Lasers
           </button>
	 *
	 *  3、防止React中的默认行为
	 *  function ActionClick() {
	     function handleClick(e) {
			  e.preventDefault();
			  console.log('默认');
         }

         return (
             <a href="#" onClick={handleClick}> click me
			 </a>);
   }
	 *  4.事件绑定四种方式
	 *   A、this.handleClick = this.handleClick.bind(this);
	 *
	 *   B、handleClick = () => {
                          console.log('this is:', this);
                       }

	     C、<button onClick={(e) => this.handleClick(e)}>
                   Click me
            </button>
	 *
	 *   D、<button onClick={this.handleClick.bind(this,e)}>
             Click me
          </button>
	 *
	 *
	 *
	 *
	 *
	 *
	 *
	 *
	 *
	 * **/
    class ButtonEvent extends React.Component{

        constructor(props){
            super(props);
            this.state = {isToggleOn: true};

            // 这边绑定是必要的，这样 `this` 才能在回调函数中使用
            this.handleClick = this.handleClick.bind(this);
         }
         handleClick(){

              this.setState( 
              (prevState) => ({

                  isToggleOn : !prevState.isToggleOn
              })
            );
          }
         render(){
            return(
             <div>
                <button onClick = {this.handleClick} >点击按钮 {this.state.isToggleOn ? 'ON' : 'OFF'}</button>
             </div>
            );
       }
      }


      // 定义组件
      class Popper extends React.Component{
          constructor(props){
           super(props);

           this.state = {
              name : 'hello 你好',
              age : '18'
           }
           //解决方案一
           //this.handleClick = this.handleClick.bind(this);
         }
 
           
          //事件对象e要放在最后 
         preventPop(arg1,arg2,e){
          e.preventDefault();
          alert('参数1：'+ arg1 + '参数2：'+arg2);

         }

           render(){
             return(
               <div>
                <p>新的标签</p>
                 {/* 通过 bind() 方法传递参数。需要通过 bind 方法来绑定参数，第一个参数指向 this,第二个参数开始才是事件函数接收到的参数 */}
                <a href="www.baidu.com" onClick = {this.preventPop.bind(this,this.state.name,this.state.age)}>click</a>
               </div>
             );
           }

      }

      function App(){

       return(
       <div>
         <ButtonEvent/>
         <Popper/>

       </div>

        );

      } 

     /**4.渲染**/
    ReactDOM.render(
      <App/>,
      document.getElementById('example')
    );


	   </script>
</body>
</html>